<template>
  <div>
    <template #extra>
      <a-space>
        <a-button v-if="!isEditing" type="primary" @click="isEditing = true">
          编辑信息
        </a-button>
        <template v-else>
          <a-button type="primary" @click="handleSave">保存</a-button>
          <a-button @click="handleCancel">取消</a-button>
        </template>
      </a-space>
    </template>
    <a-radio-group v-model:value="size" @change="onChange">
      <a-radio value="default">default</a-radio>
      <a-radio value="middle">middle</a-radio>
      <a-radio value="small">small</a-radio>
    </a-radio-group>
    <br />
    <br />
    <div v-if="!isEditing">
      <a-descriptions bordered :size="size">
        <a-descriptions-item label="头像" :span="3">
          <a-image v-if="userInfo.userAvatar" :src="userInfo.userAvatar" :width="100" :height="auto" />
        </a-descriptions-item>
        <a-descriptions-item label="姓名">{{ userInfo.userName }}</a-descriptions-item>
        <a-descriptions-item v-if="userInfo.dormitoryVO && userInfo.dormitoryVO.dormitoryName" label="宿舍号">{{ userInfo.dormitoryVO.dormitoryName }}</a-descriptions-item>
        <a-descriptions-item label="角色">{{ userInfo.userRole }}</a-descriptions-item>
        <a-descriptions-item label="账号">{{ userInfo.userAccount }}</a-descriptions-item>
        <a-descriptions-item label="密码" :span="2">{{ userInfo.userPassword }}</a-descriptions-item>
        <a-descriptions-item label="地址" :span="3">{{ userInfo.dormitoryVO?.building?.address }}</a-descriptions-item>
        <a-descriptions-item label="简介" :span="3">{{ userInfo.userProfile }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div v-else>
      <a-form :model="editForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="姓名" required>
              <a-input v-model:value="editForm.userName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="宿舍号" required>
              <a-input v-model:value="userInfo.dormitoryVO.dormitoryName" disabled />
          </a-col>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="账号" required>
              <a-input v-model:value="editForm.userAccount" />
          </a-col>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码" required>
              <a-input-password v-model:value="editForm.userPassword" />
          </a-col>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="简介" required>
              <a-input v-model:value="editForm.userProfile" />
          </a-col>
          </a-col>
        </a-row>
      </a-form>
      <br />
      <div>
        <a-upload
          v-model:file-list="fileList"
          action="http://localhost:8080/api/file/uploadNew"
          list-type="picture"
          @change="handleChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            upload
          </a-button>
        </a-upload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { message } from "ant-design-vue";
import type { UploadChangeParam } from "ant-design-vue";
import { UploadOutlined } from "@ant-design/icons-vue";

// 接收父组件传递的属性
defineProps<{
  userInfo: any;
  editForm: any;
  isEditing: boolean;
}>();
// 向父组件发送事件
const emit = defineEmits(["save", "cancel"]);

const size = ref("default");
const fileList = ref([]);

const onChange = (e: any) => {
  console.log("size checked", e.target.value);
  size.value = e.target.value;
};

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status!== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === "done") {
    console.log("infochange");
    console.log(info.fileList[0].response?.data);
    editForm.value.userAvatar = info.fileList[0].response?.data;
    console.log("editForm.value.userAvatar" + editForm.value.userAvatar);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};

const handleSave = () => {
  emit("save");
};

const handleCancel = () => {
  emit("cancel");
};
</script>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
    float: left;
    width: 200px;
    margin-right: 8px;
}
.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
    float: right;
}
</style>